let drag = {
  element:null,
  x:null,
  y:null,
  isPressed: false,
  eleLeft:0,
  eleTop:0,
  dragBoxWidth:0,
  startX:0,
  endX:0,
  dragBox:null,
  dragedBox:null,
  dragState:0
};
drag.captureTouch = function (element) {
  this.element = element;
  let that = this;
  document.addEventListener("mouseup", function () {
      if(that.dragState === 0){
        that.dragBox.style.transform = "translate(0px,0px)";
        that.dragedBox.style.width = "0px";
        that.dragedBox.innerText = "";
        that.dragBox.setAttribute("class", 'w40 h40 bg100 arrDoubleRight fl');
      }
  })
  element.addEventListener("mousedown", function (event) {
    if(that.dragState === 0){
      let dragBox = document.getElementById("dragBox");
      let dragedBox = document.getElementById("dragedBox");
      that.dragBox = dragBox;
      that.dragedBox = dragedBox;
      let x = null;
      let y = null;
      if (event.pageX || event.pageY){
        x = event.pageX;
        y = event.pageY;
      } else{
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }
      x -= element.offsetLeft;
      y -= element.offsetTop;
      let dragBoxLeft = dragBox.parentNode.offsetLeft;
      let dragBoxTop = dragBox.parentNode.offsetTop;
      that.dragBoxWidth = dragBox.parentNode.clientWidth;
      that.startX = x;
      let dragWidth = dragBox.clientWidth;
      let dragHeight = dragBox.clientHeight;
      that.endX = that.dragBoxWidth - dragWidth + that.startX;
      that.isPressed = x > dragBoxLeft && x < (dragBoxLeft + dragWidth) && y > dragBoxTop && y < (dragBoxTop + dragHeight);
    }
  }, false);
  element.addEventListener("mouseup", function (event) {
    that.isPressed = false;
    let x = null;
    let y = null;
    if (event.pageX || event.pageY){
      x = event.pageX;
      y = event.pageY;
    } else{
      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
    if(x < that.endX && that.dragState === 0){
        that.dragBox.style.transform = "translate(0px,0px)";
        that.dragedBox.style.width = "0px";
    }
  }, false);
  element.addEventListener("mousemove", function (event) {
    let x = null;
    let y = null;
    if (event.pageX || event.pageY){
      x = event.pageX;
      y = event.pageY;
    } else{
      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
    if(that.isPressed){
      let dragLeft = x - that.startX;
      that.dragBox.style.transform = "translate(" + dragLeft + "px,0px)";
      that.dragedBox.style.width = dragLeft + "px";
      if(x < that.startX){
        that.dragBox.style.transform = "translate(0px,0px)";
        that.dragedBox.style.width = "0px";
      }
      if(x >= that.endX){
        that.dragBox.style.transform = "translate(" + (that.endX - that.startX) + "px,0px)";
        that.dragedBox.style.width = (that.endX - that.startX) + "px";
        that.dragState = 1;
        that.dragedBox.innerText = "验证成功";
        that.dragBox.setAttribute("class", 'w40 h40 bg100 successBg pointer');
        localStorage.setItem("dragState", 1)
        that.isPressed = false;
      }
    }
  }, false);
}

export default drag;
